<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getArticleApi, deleteArticleApi } from "../../api/article";
import { ref } from "vue";
import dayjs from "dayjs";

const data = ref({});
const getArticle = async (id) => {
  const res = await getArticleApi(id);
  data.value = res;
  console.log(res);
};

const deleteArticle = async (id) => {
  await deleteArticleApi(id);
  uni.navigateBack();
};

const toEdit = (id) => {
  uni.navigateTo({ url: `/pages/edit/index?id=${id}` });
};

const ids = ref(null);

onLoad((data) => {
  console.log("onLoad", data);
  ids.value = data.id;
  getArticle(data.id);
});

onShow(() => {
  getArticle(ids.value);
});
</script>
<template>
  <view class="detail">
    <view class="detail__title"
      ><p>{{ data.title }}</p>
      <span>{{
        dayjs(data.createdAt).format("YYYY-MM-DD HH:mm:ss")
      }}</span></view
    >
    <view class="detail__content">{{ data.content }}</view>

    <view class="detail__footer">
      <span class="detail__footer-delete" @click="deleteArticle(data.id)">
        删除
      </span>
      <span class="detail__footer-edit" @click="toEdit(data.id)"> 编辑 </span>
    </view>
  </view>
</template>
